<template>
  <div class="detail-container">
    <div class="detail-content card-shadow">
      <!-- 物品基本信息 -->
      <div class="item-header">
        <div class="title-section">
          <h1>{{ itemData.title }}</h1>
          <el-tag :type="itemData.type === 'lost' ? 'danger' : 'success'" size="large">
            {{ itemData.type === 'lost' ? '失物' : '招领' }}
          </el-tag>
        </div>
        <div class="meta-info">
          <span class="time">
            <el-icon><Timer /></el-icon>
            {{ itemData.type === 'lost' ? '丢失时间：' : '拾获时间：' }}{{ itemData.time }}
          </span>
          <span class="location">
            <el-icon><Location /></el-icon>
            {{ itemData.type === 'lost' ? '丢失地点：' : '拾获地点：' }}{{ itemData.location }}
          </span>
          <span class="category">
            <el-icon><Collection /></el-icon>
            物品类别：{{ itemData.category }}
          </span>
        </div>
      </div>

      <!-- 图片展示 -->
      <div class="image-section" v-if="itemData.images && itemData.images.length > 0">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="(image, index) in itemData.images" :key="index">
            <img :src="image" :alt="itemData.title" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 物品描述 -->
      <div class="description-section">
        <h2>物品描述</h2>
        <p>{{ itemData.description }}</p>
      </div>

      <!-- 联系信息 -->
      <div class="contact-section">
        <h2>联系方式</h2>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="联系人">
            {{ itemData.contact.name }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            {{ itemData.contact.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="微信" v-if="itemData.contact.wechat">
            {{ itemData.contact.wechat }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 分享功能 -->
      <div class="share-section">
        <h2>分享</h2>
        <div class="share-buttons">
          <el-button type="primary" @click="handleShare('wechat')">
            <el-icon><ChatDotRound /></el-icon>微信
          </el-button>
          <el-button type="primary" @click="handleShare('weibo')">
            <el-icon><Share /></el-icon>微博
          </el-button>
          <el-button type="primary" @click="handleShare('qq')">
            <el-icon><Message /></el-icon>QQ
          </el-button>
          <el-button @click="handleCopyLink">
            <el-icon><Link /></el-icon>复制链接
          </el-button>
        </div>
      </div>

      <!-- 相似物品推荐 -->
      <div class="similar-section" v-if="similarItems.length > 0">
        <h2>相似物品</h2>
        <el-row :gutter="20">
          <el-col
            v-for="item in similarItems"
            :key="item.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <el-card
              class="similar-card"
              :body-style="{ padding: '0px' }"
              @click="handleItemClick(item)"
            >
              <img :src="item.image" class="similar-image" />
              <div class="similar-content">
                <h3 class="similar-title text-ellipsis">{{ item.title }}</h3>
                <div class="similar-footer">
                  <span class="similar-time">{{ item.time }}</span>
                  <el-tag
                    :type="item.type === 'lost' ? 'danger' : 'success'"
                    size="small"
                  >
                    {{ item.type === 'lost' ? '失物' : '招领' }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Timer,
  Location,
  Collection,
  ChatDotRound,
  Share,
  Message,
  Link
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

// 模拟物品数据
const itemData = ref({
  id: 1,
  title: 'iPhone 15 Pro',
  type: 'lost',
  time: '2024-03-15 14:30',
  location: '图书馆三楼',
  category: '电子设备',
  description: '在图书馆三楼自习室丢失一部iPhone 15 Pro，深空黑色，有黑色保护壳，屏幕有钢化膜。手机锁屏壁纸是一张猫咪照片。',
  images: [
    'https://picsum.photos/800/400?random=1',
    'https://picsum.photos/800/400?random=2',
    'https://picsum.photos/800/400?random=3'
  ],
  contact: {
    name: '张三',
    phone: '13800138000',
    wechat: 'zhangsan123'
  }
})

// 模拟相似物品数据
const similarItems = ref([
  {
    id: 2,
    title: 'iPhone 14',
    type: 'found',
    time: '2024-03-14',
    image: 'https://picsum.photos/300/200?random=4'
  },
  {
    id: 3,
    title: '华为手机',
    type: 'lost',
    time: '2024-03-13',
    image: 'https://picsum.photos/300/200?random=5'
  }
])

// 处理分享
const handleShare = (platform: string) => {
  // TODO: 实现分享功能
  ElMessage.success(`分享到${platform}`)
}

// 复制链接
const handleCopyLink = () => {
  const url = window.location.href
  navigator.clipboard.writeText(url).then(() => {
    ElMessage.success('链接已复制到剪贴板')
  })
}

// 点击相似物品
const handleItemClick = (item: any) => {
  router.push(`/detail/${item.id}`)
}

// 获取物品详情
const fetchItemDetail = async (id: string) => {
  // TODO: 调用接口获取物品详情
  console.log('获取物品详情：', id)
}

// 获取相似物品
const fetchSimilarItems = async (id: string) => {
  // TODO: 调用接口获取相似物品
  console.log('获取相似物品：', id)
}

onMounted(() => {
  const id = route.params.id as string
  fetchItemDetail(id)
  fetchSimilarItems(id)
})
</script>

<style scoped lang="scss">
.detail-container {
  max-width: 1200px;
  min-width: $min-width;
  margin: 0 auto;
  padding: $spacing-huge;
  animation: fadeIn 0.6s ease;
  
  @media (max-width: 768px) {
    padding: $spacing-base;
  }
}

.detail-content {
  background: white;
  border-radius: $border-radius-large;
  padding: $spacing-huge;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: $primary-gradient;
  }
}

.item-header {
  margin-bottom: $spacing-huge;
  animation: slideDown 0.6s ease;

  .title-section {
    display: flex;
    align-items: center;
    gap: $spacing-base;
    margin-bottom: $spacing-large;

    h1 {
      margin: 0;
      font-size: 32px;
      background: $primary-gradient;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .el-tag {
      padding: $spacing-small $spacing-base;
      border: none;
      font-weight: 500;
    }
  }

  .meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-large;
    color: $text-secondary;
    font-size: 16px;

    span {
      display: flex;
      align-items: center;
      gap: $spacing-small;
      padding: $spacing-small $spacing-base;
      background: rgba(64, 158, 255, 0.1);
      border-radius: $border-radius-base;
      transition: $transition-base;

      &:hover {
        background: rgba(64, 158, 255, 0.2);
      }
    }

    .el-icon {
      font-size: 18px;
      color: var(--el-color-primary);
    }
  }
}

.image-section {
  margin: $spacing-huge 0;
  animation: fadeIn 0.8s ease;

  :deep(.el-carousel__item) {
    border-radius: $border-radius-large;
    overflow: hidden;

    &:hover .carousel-image {
      transform: scale(1.05);
    }
  }

  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: $transition-base;
  }
}

.description-section,
.contact-section,
.share-section,
.similar-section {
  margin-bottom: $spacing-huge;
  animation: slideUp 0.6s ease;

  h2 {
    font-size: 24px;
    color: $text-primary;
    margin-bottom: $spacing-large;
    position: relative;
    padding-left: $spacing-large;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: $primary-gradient;
      border-radius: $border-radius-base;
    }
  }
}

.description-section {
  p {
    color: $text-regular;
    line-height: 1.8;
    font-size: 16px;
    padding: $spacing-base;
    background: #f8f9fa;
    border-radius: $border-radius-base;
  }
}

.contact-section {
  :deep(.el-descriptions) {
    padding: $spacing-base;
    background: #f8f9fa;
    border-radius: $border-radius-base;

    .el-descriptions__label {
      color: $text-secondary;
    }

    .el-descriptions__content {
      color: $text-primary;
      font-weight: 500;
    }
  }
}

.share-buttons {
  display: flex;
  gap: $spacing-base;
  flex-wrap: wrap;

  .el-button {
    min-width: 120px;
    border-radius: $border-radius-base;
    transition: $transition-base;
    
    &--primary {
      background: $primary-gradient;
      border: none;
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-2px);
      }
    }

    .el-icon {
      margin-right: $spacing-small;
    }
  }
}

.similar-section {
  .similar-card {
    border: none;
    border-radius: $border-radius-large;
    overflow: hidden;
    transition: $transition-smooth;
    cursor: pointer;

    &:hover {
      transform: translateY(-5px);
      box-shadow: $hover-shadow;

      .similar-image {
        transform: scale(1.05);
      }
    }

    .similar-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: $transition-base;
    }

    .similar-content {
      padding: $spacing-large;
      background: white;

      .similar-title {
        font-size: 18px;
        font-weight: 600;
        color: $text-primary;
        margin: 0 0 $spacing-base;
        @include text-overflow;
      }

      .similar-footer {
        @include flex-between;

        .similar-time {
          color: $text-secondary;
          font-size: 14px;
        }

        .el-tag {
          border: none;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 